<template>
	<!-- 客服 -->
	<div @mouseenter="showFloatWindow" @mouseleave="hideFloatWindow" class="kefu_box">
		<div class="kefu" @mouseover="show1 = true" @mouseout="show1 = false">
			<el-image v-if="show1" style=" width: 32px; height: 34px;margin-bottom:8px;" src="/src/assets/images/kefu.png" />
			<el-image v-else style="width: 32px; height: 34px;margin-bottom:8px;" src="/src/assets/images/kufu.png" />
			<div>咨询客服</div>
		</div>
		<xy-down :isVisible="isFloatWindowVisible1" @afterEnter="afterEnter" @beforeLeave="beforeLeave"
			style="--down_top:0px;--down_right:100px">
			<div class="service df fdc jsb">
				<div class="title">咨询客服</div>
				<div class="timer">客服热线： {{serviceinfo.complaintMobile}}</div>
				<div class="timer">{{serviceinfo.workTime}}</div>
				<!-- <div class="btn">联系在线客服</div> -->
				<el-link class="btn" target="_blank" :href="service" :underline="false">联系在线客服</el-link>
			</div>
		</xy-down>
	</div>
</template>

<script setup lang="ts">
import api from "@/api/api";


onMounted(async () => {

	await Getcustomer()
	await Getaboutus()
})

/**
 * 获取客服
 */
const service = ref('')
const Getcustomer = async () => {
	const res = await api.GetcustomerService_API()
	if (res.code === 0) {
		service.value = res.data.weixinWorkChat.chatUrl
		console.log("🚀 ~ Getcustomer ~ service.value:", service.value)
	}
}

/**
 * 获取客服相关信息
 */
 const serviceinfo = ref({})
const Getaboutus = async () => {
	const res = await api.Getaboutus_API()
	if (res.code === 0) {
		serviceinfo.value = res.data
		console.log("🚀 ~ Getcustomer ~ service.value:", service.value)
	}
}


//组件命名-----
defineOptions({ name: "xy-service-index" })
const body: any = document.querySelector("body")?.clientWidth;
const w = (body - 1500) / 2 + "px";
const isFloatWindowVisible1 = ref(false)
const show1 = ref(false);
const showFloatWindow = () => {
	isFloatWindowVisible1.value = true
}
const hideFloatWindow = () => {
	isFloatWindowVisible1.value = false
}
const afterEnter = () => {
	console.log(2222);
}
const beforeLeave = () => {
	console.log(45523443243);
}
</script>

<style lang="scss" scoped>
.kefu_box {
	position: fixed;
	right: v-bind(w);
	top: 50%;
	z-index: 999;
}

.kefu {

	width: 94px;
	height: 94px;
	background: #ffffff;
	box-shadow: 1px 4px 8px 0px #e0e4e9;
	border-radius: 10px;
	text-align: center;
	color: #0087fd;
	padding: 16px 0;
	cursor: pointer;

	&:hover {
		background-color: $bcolor;
		color: $white;
	}
}

.service {
	width: 330px;
	height: 188px;
	background-color: $white;
	border: 1px solid $dcolor;
	padding: 20px;

	.title {
		font-size: 20px;
	}

	.timer {
		color: $color1;
		font-size: 16px;
	}

	.btn {
		width: 160px;
		height: 40px;
		line-height: 40px;
		background-color: $bcolor;
		color: $white;
		font-size: 16px;
		border-radius: 5px;
		text-align: center;
		cursor: pointer;
	}
}
</style>
